<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      .active{
         background:red;
      }
   </style>
</head>
<body>
   <!-- <input type="text" class = 'box'>
   <input type="checkbox">
   <input type="text">
   <input type="checkbox" class = 'box'>
   <input type="text" > -->
   <!-- <script src="./0716/jquery.js"></script> -->
   <!-- <script>
      // $("input").css({
      //    width:100,
      //    height:100
      // })

      // $("input").prop('class','box'); //添加属性名

      // 根据对应类名增加属性
      // $("input[type=text][class]").css({
      //    width:100,
      //    height:100
      // })
      // $("input[type=checkbox][class]").css({
      //    width:100,
      //    height:100
      // })
   </script> -->

   <div class = 'box'>你好，世界</div>
   <div class = 'box'>你好，世界</div>
   <div class = 'box'>你好，世界</div>
   <div class = 'box'>你好，世界</div>
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <button>点击切换颜色</button>
   <script src="./0716/jquery.js"></script>
   <script>
      // 1、基本属性操作attr
      // $(".box").attr('data-id',10);
      // $(".box").attr('data-index',0);

      // $(".box").attr({  //两个以上添加属性（）内加{}
      //    'data-id':10,
      //    'data-index':0
      // })

      // $(".box").attr({  //设置索引值按顺序排列
      //    'data-id':10,
      //    'data-index':function(index){
      //       // console.log(arguments);
      //       return index;
      //    }
      // })

      // 发散思维：在css中的使用
      // $(".box").css({"color":"orange"})

      // $(".box").css({
      //    "color":function(){  //生成随机不同的颜色
      //       return "#"+(Math.round(Math.random()*parseInt('ffffff',16)).toString(16)).padStart(6,'0');
      //    }
      // })
      
      $("button").attr('id','btn');
      $("#btn").click(function(){
         // console.log(1)
         // $(this).css("background","red")

         // if($(this).is(".active")){
         //    $(this).removeClass("active")
         // }else{
         //    $(this).addClass("active")
         // }
         $(this).toggleClass("active");  //自动检测API:toggle
      })
   </script>
</body>
</html>